<template>
  <view class="bg-white h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <view class="px-6 pt-12 pb-4 flex items-center justify-between border-b border-gray-100">
      <view class="flex items-center">
        <view class="text-blue-500 mr-3" @click="goBack">
          <text class="fas fa-chevron-left"></text>
        </view>
        <view>
          <text class="text-xl font-bold">设备设置</text>
        </view>
      </view>
    </view>

    <!-- 设备名称编辑区域 -->
    <view class="px-6 py-4 border-b border-gray-100">
      <view class="flex items-center justify-between">
        <view>
          <text class="text-sm text-gray-500 mb-1 block">设备名称</text>
          <input 
            type="text" 
            v-model="deviceName" 
            class="text-lg font-medium bg-transparent focus:outline-none focus:border-b-2 focus:border-blue-500 transition-colors"
            placeholder="输入设备名称" />
        </view>
        <view class="text-blue-500" @click="saveDeviceName">
          <text class="fas fa-check text-xl"></text>
        </view>
      </view>
    </view>

    <!-- 设置选项列表 -->
    <view class="flex-1 px-6 py-4 overflow-auto">
      <view class="space-y-4">
        <!-- 分享设备 -->
        <view 
          class="w-full flex items-center justify-between p-4 bg-white rounded-xl border border-gray-200 hover:border-blue-500 transition-colors"
          @click="goToDeviceSharing"
        >
          <view class="flex items-center space-x-4">
            <view class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
              <text class="fas fa-share-alt"></text>
            </view>
            <text class="font-medium">分享设备</text>
          </view>
          <text class="fas fa-chevron-right text-gray-400"></text>
        </view>

        <!-- 帮助 -->
        <view class="w-full flex items-center justify-between p-4 bg-white rounded-xl border border-gray-200 hover:border-blue-500 transition-colors" @click="showHelp">
          <view class="flex items-center space-x-4">
            <view class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500">
              <text class="fas fa-question-circle"></text>
            </view>
            <text class="font-medium">帮助</text>
          </view>
          <text class="fas fa-chevron-right text-gray-400"></text>
        </view>

        <!-- 固件升级 -->
        <view class="w-full flex items-center justify-between p-4 bg-white rounded-xl border border-gray-200 hover:border-blue-500 transition-colors" @click="checkFirmwareUpdate">
          <view class="flex items-center space-x-4">
            <view class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500">
              <text class="fas fa-download"></text>
            </view>
            <view class="flex-1">
              <text class="font-medium block">固件升级</text>
              <text class="text-xs text-gray-500">当前版本：{{ firmwareVersion || 'v1.0.0' }}</text>
            </view>
          </view>
          <text class="fas fa-chevron-right text-gray-400"></text>
        </view>
      </view>
    </view>

    <!-- 移除设备按钮 -->
    <view class="p-6 border-t border-gray-200">
      <button 
        class="w-full py-4 rounded-xl bg-red-50 text-red-500 font-medium hover:bg-red-100 transition-colors"
        @click="confirmRemoveDevice"
      >
        移除设备
      </button>
    </view>
  </view>
</template>

<script>
import { deviceApi } from '@/api/index.js'

export default {
  data() {
    return {
      deviceId: '',
      deviceName: '',
      firmwareVersion: '',
      originalDeviceName: '',
      loading: false
    }
  },
  
  onLoad(options) {
    this.deviceId = options.deviceId || ''
    this.loadDeviceInfo()
  },
  
  methods: {
    async loadDeviceInfo() {
      if (!this.deviceId) return
      
      this.loading = true
      try {
        const result = await deviceApi.getDeviceDetail(this.deviceId)
        
        if (result && result.errCode === 0) {
          const deviceInfo = result.data
          this.deviceName = deviceInfo.deviceName || '我的沙画机'
          this.originalDeviceName = this.deviceName
          this.firmwareVersion = deviceInfo.firmwareVersion || 'v1.0.0'
        } else {
          uni.showToast({
            title: result?.errMsg || '获取设备信息失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载设备信息失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    async saveDeviceName() {
      if (!this.deviceId || !this.deviceName.trim()) {
        uni.showToast({
          title: '设备名称不能为空',
          icon: 'none'
        })
        return
      }
      
      if (this.deviceName === this.originalDeviceName) {
        return
      }
      
      this.loading = true
      try {
        const result = await deviceApi.updateDevice(this.deviceId, {
          deviceName: this.deviceName.trim()
        })
        
        if (result && result.errCode === 0) {
          this.originalDeviceName = this.deviceName
          uni.showToast({
            title: '设备名称已更新',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: result?.errMsg || '更新设备名称失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('保存设备名称失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    goToDeviceSharing() {
      uni.navigateTo({
        url: `/pages/device/sharing?deviceId=${this.deviceId}`
      })
    },
    
    showHelp() {
      uni.showToast({
        title: '帮助文档正在开发中',
        icon: 'none'
      })
    },
    
    checkFirmwareUpdate() {
      uni.showLoading({
        title: '检查更新中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showModal({
          title: '固件更新',
          content: '当前已是最新版本',
          showCancel: false,
          confirmText: '确定'
        })
      }, 1500)
    },
    
    confirmRemoveDevice() {
      uni.showModal({
        title: '移除设备',
        content: '确定要移除此设备吗？移除后将无法控制此设备。',
        confirmColor: '#f43f5e',
        cancelText: '取消',
        confirmText: '移除',
        success: async (res) => {
          if (res.confirm) {
            this.removeDevice()
          }
        }
      })
    },
    
    async removeDevice() {
      if (!this.deviceId) return
      
      this.loading = true
      try {
        const result = await deviceApi.deleteDevice(this.deviceId)
        
        if (result && result.errCode === 0) {
          uni.showToast({
            title: '设备已移除',
            icon: 'success'
          })
          
          setTimeout(() => {
            uni.navigateBack({
              delta: 2 // 返回设备列表页
            })
          }, 1500)
        } else {
          uni.showToast({
            title: result?.errMsg || '移除设备失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('移除设备失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
/* TailwindCSS 工具类样式 */
.bg-white { background-color: #ffffff; }
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-green-100 { background-color: #d1fae5; }
.bg-purple-100 { background-color: #ede9fe; }

.text-blue-500 { color: #3b82f6; }
.text-green-500 { color: #10b981; }
.text-purple-500 { color: #8b5cf6; }
.text-red-500 { color: #ef4444; }
.text-gray-100 { color: #f3f4f6; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }

.text-sm { font-size: 28rpx; }
.text-xs { font-size: 24rpx; }
.text-lg { font-size: 36rpx; }
.text-xl { font-size: 40rpx; }

.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

.h-screen { height: 100vh; }
.h-10 { height: 80rpx; }
.w-10 { width: 80rpx; }
.w-full { width: 100%; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.space-x-4 > * + * { margin-left: 32rpx; }
.space-y-4 > * + * { margin-top: 32rpx; }

.p-4 { padding: 32rpx; }
.p-6 { padding: 48rpx; }
.px-6 { padding-left: 48rpx; padding-right: 48rpx; }
.py-4 { padding-top: 32rpx; padding-bottom: 32rpx; }
.pt-12 { padding-top: 96rpx; }
.pb-4 { padding-bottom: 32rpx; }
.py-4 { padding-top: 32rpx; padding-bottom: 32rpx; }
.mb-1 { margin-bottom: 8rpx; }
.mr-3 { margin-right: 24rpx; }
.block { display: block; }

.border { border-width: 2rpx; }
.border-t { border-top-width: 2rpx; }
.border-b { border-bottom-width: 2rpx; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-blue-500 { border-color: #3b82f6; }

.rounded-xl { border-radius: 24rpx; }
.rounded-full { border-radius: 50%; }

.overflow-auto { overflow: auto; }
.transition-colors { transition-property: color, background-color, border-color; transition-duration: 200ms; }

.focus\:outline-none:focus { outline: none; }
.focus\:border-b-2:focus { border-bottom-width: 4rpx; }
.focus\:border-blue-500:focus { border-bottom-color: #3b82f6; }

.hover\:border-blue-500:hover { border-color: #3b82f6; }
.hover\:bg-red-100:hover { background-color: #fee2e2; }

/* Font Awesome 图标样式 */
.fas {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
  font-weight: 900;
}
.fa-chevron-left:before { content: "\f053"; }
.fa-chevron-right:before { content: "\f054"; }
.fa-check:before { content: "\f00c"; }
.fa-share-alt:before { content: "\f1e0"; }
.fa-question-circle:before { content: "\f059"; }
.fa-download:before { content: "\f019"; }
</style>
